<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>十秒挑战</title>
  <script src="./vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
  <input type="text" v-model="countdown">
  <button @click="begIn" :disabled="fade">挑战开始</button>
  <button @click="stop" :disabled="!fade">暂停</button>
  <button @click="oneMoreTime" :disabled="fade">再来一次</button>
</div>
</body>
<script>
  let vm = new Vue({
    el: '#app',
    data: {
      countdown: 0.00,
      timer: null,
      fade: false,
    },
    methods: {
      begIn () {
        timer = setInterval(() => {
          this.countdown = parseFloat((this.countdown + 0.01).toFixed(3));
          if(this.countdown > 11) {
            clearInterval(timer);
            alert('挑战失败，可选择重新挑战')
          }
        },10)
        this.fade = true;
      },
      stop () {
        clearInterval(timer);
        if(this.countdown > 11) {
          alert('挑战失败，可选择重新挑战')
        } else if (this.countdown == 10) {
          alert('恭喜，挑战成功！')
        } else {
          alert('挑战失败，可选择重新挑战')
        }
        this.fade = false;
      },
      oneMoreTime () {
        this.countdown = 0.00;
        this.begIn();
      }
    }
  })
</script>
</html>